<template>
  <div class="main-container">
    <div class="card-container">
      <a-tabs hide-add type="editable-card">
        <a-tab-pane key="1" tab="审计记录查询">
          <div class="tab-content">
            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-form-model-item label="单位">
                <a-tree-select v-model="form.value" show-search style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="Please select" allow-clear tree-default-expand-all>
                  <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
                    <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
                      <a-tree-select-node key="random" value="leaf1" title="my leaf" />
                      <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
                    </a-tree-select-node>
                    <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
                      <a-tree-select-node key="random3" value="sss">
                        <b slot="title" style="color: #08c">自定义</b>
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </a-form-model-item>

              <a-form-model-item label="服务名">
                <a-select v-model="form.region" placeholder="please select your zone">
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>

              <a-form-model-item label="状态">
                <a-select v-model="form.region" placeholder="please select your zone">
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>

              <a-form-model-item label="分类">
                <a-select v-model="form.region" placeholder="please select your zone">
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>

              <a-form-model-item label="时间范围">
                <a-date-picker v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" />
              </a-form-model-item>

              <a-form-model-item label="操作人">
                <a-input v-model="form.name" />
              </a-form-model-item>

              <a-form-model-item label="关键字">
                <a-input v-model="form.name" />
              </a-form-model-item>

              <a-form-model-item>
                <div class="btn-position-right">
                  <div class="btn-group">
                    <a-button type="primary" @click="onSubmit">
                      查询
                    </a-button>
                    <div class="haveBackground" style="margin-right:10px">
                      <a-dropdown trigger='[click]'>
                        <a-menu slot="overlay" @click="handleMenuClick">
                          <a-menu-item key="1">
                            1st
                          </a-menu-item>
                          <a-menu-item key="2">
                            2nd222
                          </a-menu-item>
                          <a-menu-item key="3">
                            3rd
                          </a-menu-item>
                        </a-menu>
                        <a-button style="margin-left: 8px"> 审计操作
                          <a-icon type="down" />
                        </a-button>
                      </a-dropdown>
                    </div>
                    <a-button type="primary" @click="onSubmit">
                      导出
                    </a-button>
                  </div>
                </div>
              </a-form-model-item>
            </a-form-model>
          </div>

          <a-table :columns="columns" :data-source="data">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <span slot="customTitle">
              <a-icon type="smile-o" /> Name
            </span>
            <span slot="tags" slot-scope="tags">
              <a-tag v-for="tag in tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
            <span slot="action" slot-scope="text, record">
              <a>Invite 一 {{ record.name }}</a>
              <a-divider type="vertical" />
              <a>Delete</a>
              <a-divider type="vertical" />
              <a class="ant-dropdown-link"> More actions
                <a-icon type="down" />
              </a>
            </span>
          </a-table>
        </a-tab-pane>

      </a-tabs>

    </div>
    <div>

    </div>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" },
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" },
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];
export default {
  data() {
    return {
      data,
      columns,
      flag: true,
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
      form: {
        name: "",
        value: undefined,
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
};
</script>

<style lang='less'>
@bordercolor: #b6cae4;
.main-container {
  padding: 16px;
}
.active {
  display: none;
}
.active1 {
  display: none;
}
.ant-tabs-bar {
  margin: 0;
}
.ant-tabs-tabpane {
  padding: 16px;
}
.tab-content {
  border: 1px solid @bordercolor;
  padding: 10px 40px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.ant-form {
  display: flex;
  flex-wrap: wrap;
  .ant-form-item {
    width: 33.33%;
  }
}
.ant-table-body {
  border: 1px solid @bordercolor;
}
.ant-btn {
  min-width: 94px;
}
.btn-position-right {
  position: relative;
  .btn-group {
    display: flex;
    align-items: center;
    position: absolute;
    right: -480px;
    top: 0;
  }
}
.ant-dropdown-placement-bottomLeft {
  top: 214px !important;
}

</style>
